<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="../js/jquery.js"></script>
    <link rel="stylesheet" href="../css/comon0.css" />
  </head>

  <style>
    /* 设置图表容器的样式 */
    #lineChart {
        width: 400px;
        height: 400px;
        margin-left: -200px auto;
    }

    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .chart-container {
        width: calc(33.33% - 10px); /* 33.33% width with margin */
        margin: 5px;
        height: 350px; /* Adjust height as needed */
        background-color: #f0f0f0; /* Placeholder background color */
    }

    .chart-container:nth-child(4),
    .chart-container:nth-child(5) {
        width: calc(50% - 10px); /* 50% width with margin */
    }

    .personality {
        font-size: 8.4px;
        line-height: 1.5;
    }

    .action { color: blue; }
    .reflective { color: green; }
    .theoretical { color: red; }
    .practical { color: orange; }

    .chart-container {
        width: calc(33.33% - 10px); /* 33.33% 宽度，带有边距 */
        margin: 5px;
        height: 350px; /* 根据需要调整高度 */
        background-color: #b2b3b7; /* 更新的背景颜色 */
    }

    .chart-container:nth-child(4),
    .chart-container:nth-child(5) {
        width: calc(50% - 10px); /* 50% 宽度，带有边距 */
    }




  </style>

  <body>
    <div class="loading">
      <div class="loadbox">
          <img src="../images/loading.gif" /> 页面加载中...
      </div>
  </div>
  <div class="head">
      <h1>班级信息图表大屏</h1>
      <!--<div class="weather"><img src="images/weather.png"><span>多云转小雨</span><span>2017-12-30</span></div>-->
  </div>
  <div class="mainbox">
      <div class="container">
          <div class="chart-container" id="scatterChart"></div>

          <div class="chart-container">
              <canvas id="learningStyleChart"></canvas>
              <div class="personality">
                  <span class="action">行动者：</span>特征：重视经验、活动、直觉的决策、团队合作、不喜欢行政组织和程序。<br>
                  擅长的活动：头脑风暴、解决问题、小组讨论、拼图、比赛<br><br>

                  <span class="reflective">反思者：</span>特征：专注于了解意义,观察、描述过程和预测结果; 在活动中关注问题的结果而非方法。<br>
                  擅长的活动：讨论、自我分析、观察、反馈、采访<br><br>

                  <span class="theoretical">理论者：</span>特征：关注概念、逻辑、归纳、系统化; 不相信直觉、直观，也不让社会及感情融入判断。<br>
                  擅长的活动：示范、统计、故事、应用理论<br><br>

                  <span class="practical">实用主义者：</span>特征：喜欢小组合作、讨论、辩论，善于冒险和应用成果，但不善于反思、观察和深度的理解。<br>
                  擅长的活动：自我反省、案例研究、解决问题、讨论<br>
              </div>
          </div>

          <div class="chart-container">
              <canvas id="communicationChart"></canvas>
          </div>

          <div class="chart-container" style="width: 420px;">
              <canvas id="homeworkChart"></canvas>
          </div>

          <div class="container2" style="margin-left: -490px;margin-top: -50px;">
            <div class="map">
                <div class="map1"><img src="../images/lbx.png" /></div>
                <div class="map2"><img src="../images/jt.png" /></div>
                <div class="map3"><img src="../images/map.png" /></div>
                <div class="map4" id="map_1"></div>
            </div>
        </div>

          <div class="chart-container">
              <canvas class="js-chartjs-bars"></canvas>
          </div>
          
      </div>



  </div>
  <div class="back"></div>
    <script language="JavaScript" src="../js/js.js"></script>
    <script type="text/javascript" src="../js/echarts.min.js"></script>
    <script type="text/javascript" src="../js/china.js"></script>
    <script type="text/javascript" src="../js/Chart.js"></script>
    <script type="text/javascript" src="../js/area_echarts.js"></script>
    <script type="text/javascript" src="../js/http.js"></script>
    <script type="text/javascript">
      //参与提问次数区间人数
      var data = httpCount({}).data;
      //作业成绩区间人数
      var data4 = httpScoreCount({}).data;

      var datatmp = [];
      var data1tmp1 =0;
      var data1tmp2 =0;
      var data1tmp3 =0;
      var data1tmp4 =0;

      var names = [];
      var postCounts = [];

      var completeCounts = [];

      for(let i in data){
        //data1
        if(data[i].style!=null){
          if(data[i].style==1){
            data1tmp1++;
          }else  if(data[i].style==2){
            data1tmp2++;
          }else  if(data[i].style==3){
            data1tmp3++;
          }else  if(data[i].style==4){
            data1tmp4++;
          }
        }

        //data2
        names.push(data[i].name);
        postCounts.push(data[i].postCount);


        //data3
        completeCounts.push(data[i].completeCount);
      }
      datatmp.push(data1tmp1);
      datatmp.push(data1tmp2);
      datatmp.push(data1tmp3);
      datatmp.push(data1tmp4);

      console.log('names',names)
      console.log('datatmp',datatmp)
      console.log('postCounts',postCounts)
      console.log('completeCounts',completeCounts)





      // 学生学习风格饼状图数据
      var learningStyleData = {
        labels: ["行动者", "反思者", "理论者", "实用主义者"],
        datasets: [
          {
            data: datatmp,
            backgroundColor: ["#ff6384", "#36a2eb", "#ffce56", "#abce26"],
          },
        ],
      };

      // 学生交流次数统计图数据
      var communicationData = {
        labels: names,
        datasets: [
          {
            label: "交流次数",
            data: postCounts,
            backgroundColor: "#ff6384",
          },
        ],
      };

      // 学生完成作业次数统计柱状图数据
      var homeworkData = {
        labels: names,
        datasets: [
          {
            label: "作业次数",
            data: completeCounts,
            backgroundColor: "#36a2eb",
          },
        ],
      };

      // 学生分数人数柱状图数据
      $(document).ready(function (e) {
        var $dashChartBarsCnt = jQuery(".js-chartjs-bars")[0].getContext("2d");

        var $dashChartBarsData = {
          labels: [
            "0~60",
            "60~70",
            "70~80",
            "80~90",
            "90~100",
          ],
          datasets: [
            {
              label: "作业成绩区间人数",
              borderWidth: 1,
              borderColor: "rgba(0,0,0,0)",
              backgroundColor: "rgba(51,202,185,0.5)",
              hoverBackgroundColor: "rgba(51,202,185,0.7)",
              hoverBorderColor: "rgba(0,0,0,0)",
              data: [data4.range60, data4.range70, data4.range80, data4.range90, data4.range100],
            },
          ],
        };
        new Chart($dashChartBarsCnt, {
          type: "bar",
          data: $dashChartBarsData,
        });
      });

      // 创建图表
      var learningStyleChart = new Chart(
        document.getElementById("learningStyleChart"),
        {
          type: "pie",
          data: learningStyleData,
        }
      );

      var communicationChart = new Chart(
        document.getElementById("communicationChart"),
        {
          type: "bar",
          data: communicationData,
        }
      );

      var homeworkChart = new Chart(document.getElementById("homeworkChart"), {
        type: "bar",
        data: homeworkData,
      });






      //散点图

      var res = httpKmean({'id':1});
      var kdata = res.data;

      var myChart = echarts.init(document.getElementById('scatterChart'));
    var scatterData ={
        "data": kdata.data,
        "k": 2,
        "group": kdata.group,
        "info": kdata.info
    };
    var COLOR_ALL = [
        '#37A2DA',
        '#e06343',
        '#37a354',
        '#b55dba',
        '#b5bd48',
        '#8378EA',
        '#96BFFF'
    ];

    var data = scatterData.data;
    var infos = scatterData.info;
    var group = scatterData.group;
    var option = {
        xAxis: {},
        yAxis: {},
        aria: {
            // 下面几行可以不写，因为 label.enabled 默认 true
            // label: {
            //     enabled: true
            // },
            enabled: true
        },
        title: {
            text: "学生信息分析----分组数"+scatterData.k,
            x: 'center'
        },
        series: {
            type: 'scatter',
            encode: { tooltip: [0, 1] },
            symbolSize: 15,
            itemStyle: {
                borderColor: '#555',
                color: function (params){
                    return COLOR_ALL[group[params.dataIndex]]
                }
            },
            datasetIndex: 1,
            data: data,
        },
        tooltip: {
            formatter: function(params) {
                var info = infos[params.dataIndex];

                var style = "";
                if(info.style===1){
                    style = '行动者';
                }if(info.style===2){
                    style = '反思者';
                }if(info.style===3){
                    style = '理论者';
                }if(info.style===4){
                    style = '实用主义者四类';
                }
                return '姓名: ' + info.name + '<br/>'
                    +'平均分：'+info.score+'<br/>'
                    +'作业数'+info.completeCount+'<<br/>'
                    +'提问数：'+info.postCount+'<<br/>'
                    +'学习风格：'+info.style+'<<br/>';
            }
        },
        grid: {
            left: 120
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            left: 10,
            top: 20,
            bottom: 20,
            data: ["分组1","分组2"]
        }

    };
    myChart.setOption(option);
    </script>
  </body>
</html>
